@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  position: relative;
}
.header .searcho {
  z-index: 999;
  width: 76%;
  height: 10%;
  border-radius: 20px;
  background-color: white;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 3px 2px 10px #666666;
}
.header .searcho .seacontent {
  height: 100%;
  padding: 1%;
  display: flex;
  justify-content: space-between;
}
.header .searcho .seacontent .seainput {
  outline: none;
  width: 88%;
  height: 100%;
  border: none;
  font-size: 1rem;
}
.header .searcho .seacontent .seabut {
  width: 12%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #5C7BDA;
  border: none;
  cursor: pointer;
}
.header .searcho .seacontent .seabut .seabutimg {
  max-width: 20%;
}
.header .searcho .seacontent .seabut .seatit {
  font-size: 1rem;
}
.header .searcho .seacontent .seabut .seatit a {
  color: white;
  text-decoration: none;
}

.reco .titlebox {
  text-align: center;
  width: 100%;
}
.reco .titlebox .title-tit {
  font-size: 2.5em;
  transition: text-shadow 0.3s ease;
}
.reco .titlebox .title-tit:hover {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.reco .titlebox .title-p {
  color: #666666;
  font-size: 2em;
  transition: text-shadow 0.3s ease;
}
.reco .titlebox .title-p:hover {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.reco .activeo {
  width: 80%;
  margin: auto;
  margin-top: 6.6%;
}
.reco .activeo .actbutbox {
  width: 80%;
  margin: auto;
  margin-top: 4%;
  display: flex;
  justify-content: space-between;
}
.reco .activeo .actbutbox .rollbut {
  width: 12%;
  padding: 1vh 2vh;
  border-radius: 30px;
  border: solid 2px #1A42BB;
  background-color: white;
  color: #1A42BB;
}
.reco .activeo .actbutbox .rollbut:hover {
  background-color: #1A42BB;
  color: white;
}
.reco .activeo .rolltab .overseas {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.reco .activeo .rolltab .overseas .osson {
  width: 47%;
  margin-top: 5%;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  background-color: #F1F1F1;
  overflow: hidden;
  /* 隐藏溢出部分 */
}
.reco .activeo .rolltab .overseas .osson .ossonleft {
  width: 48%;
  overflow: hidden;
  /* 隐藏溢出部分 */
}
.reco .activeo .rolltab .overseas .osson .ossonleft img {
  max-width: 100%;
  transition: all 1.5s;
}
.reco .activeo .rolltab .overseas .osson .ossonleft:hover img {
  transform: scale(1.2);
}
.reco .activeo .rolltab .overseas .osson .ossonright {
  width: 48%;
  padding: 4% 4% 4% 0;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  /* 添加过渡效果 */
}
.reco .activeo .rolltab .overseas .osson .ossonright .osrp {
  font-size: 1.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.reco .activeo .rolltab .overseas .osson .ossonright .osrtext {
  font-size: 1.2em;
  color: #939393;
  margin-top: 7%;
  margin-bottom: 19%;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.reco .activeo .rolltab .overseas .osson .ossonright .osrtetail {
  color: #FC9919;
  display: flex;
  justify-content: right;
  transform: translateX(28%);
  /* 初始位置 */
  transition: transform 0.3s ease;
  /* 添加过渡效果 */
}
.reco .activeo .rolltab .overseas .osson .ossonright .osrtetail a {
  text-decoration: none;
  color: #FC9919;
}
.reco .activeo .rolltab .overseas .osson .ossonright:hover .osrtetail {
  transform: translateX(-6%);
}
.reco .hotbox {
  width: 80%;
  margin: auto;
  margin-top: 4%;
}
.reco .hotbox .hotbody {
  width: 96%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.reco .hotbox .hotbody .hotimg {
  width: 49%;
  margin-top: 4%;
  text-align: center;
  overflow: hidden;
}
.reco .hotbox .hotbody .hotimg img {
  max-width: 100%;
  transition: all 1.5s;
}
.reco .hotbox .hotbody .hotimg:hover img {
  transform: scale(1.2);
}
.reco .hotbox .hotbody .hotcenter {
  width: 24%;
  height: 30%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 1px #989898;
  transition: box-shadow 0.3s ease;
  /* 添加过渡效果 */
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.reco .hotbox .hotbody .hotcenter p {
  font-size: 2em;
  transition: all 1.5s;
}
.reco .hotbox .hotbody .hotcenter:hover {
  box-shadow: 0 0 10px rgb(0, 0, 0);
  /* 在鼠标悬停时添加阴影 */
}
.reco .hotbox .hotbody .hotcenter:hover p {
  transform: scale(1.2);
}
.reco .hotbox .hotto {
  text-align: center;
  width: 100%;
  margin-top: 4%;
}
.reco .hotbox .hotto .hotbut {
  margin: auto;
  text-align: center;
  background-color: #1A42BB;
  font-size: 1.6em;
  padding: 0.5% 1.5%;
  border: none;
  border-radius: 40px;
}
.reco .hotbox .hotto .hotbut a {
  color: white;
  text-decoration: none;
}
.reco .camplist {
  width: 80%;
  margin: auto;
  margin-top: 4%;
}
.reco .camplist .listbody {
  width: 94%;
  margin: auto;
  margin-top: 4%;
  border: solid 1px #ECECEC;
  border-radius: 40px;
  display: flex;
}
.reco .camplist .listbody .listleft {
  width: 40%;
  overflow: hidden;
}
.reco .camplist .listbody .listleft img {
  max-width: 100%;
  transition: all 1.5s;
}
.reco .camplist .listbody .listleft:hover img {
  transform: scale(1.2);
}
.reco .camplist .listbody .listright {
  width: 59%;
  padding: 2% 2%;
  box-sizing: border-box;
}
.reco .camplist .listbody .listright .lrp {
  font-size: 2em;
  display: flex;
  align-items: center;
  margin-top: 3.6%;
}
.reco .camplist .listbody .listright .lrp .lrpnum {
  padding: 1% 2%;
  display: inline-block;
  border-radius: 50%;
  background-color: #1B7B34;
  color: white;
}
.reco .camplist .listbody .listright .lrp .lrpnum2 {
  padding: 1% 2%;
  display: inline-block;
  border-radius: 50%;
  background-color: #1EA4E9;
  color: white;
}
.reco .camplist .listbody .listright .lrp .lrpnum3 {
  padding: 1% 2%;
  display: inline-block;
  border-radius: 50%;
  background-color: #E9AE1E;
  color: white;
}
.reco .camplist .listbody .listright .lrp .lrpnum4 {
  padding: 1% 2%;
  display: inline-block;
  border-radius: 50%;
  background-color: #00A87C;
  color: white;
}
.reco .camplist .listbody .listright .lrp .lrptext {
  color: #1B7B34;
  margin-left: 6%;
  transition: text-shadow 0.3s ease;
}
.reco .camplist .listbody .listright .lrp .lrptext:hover {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.reco .find {
  margin-top: 8%;
  width: 100%;
  background-color: #EBC462;
  padding: 3% 4%;
  box-sizing: border-box;
  display: flex;
}
.reco .find .findleft {
  width: 30%;
  text-align: center;
}
.reco .find .findleft img {
  max-width: 50%;
}
.reco .find .findleft .findtit {
  font-size: 3em;
  color: #1B8145;
  font-weight: bold;
}
.reco .find .findright {
  width: 68%;
}
.reco .find .findright .frtop {
  margin-top: 2%;
  color: black;
  font-size: 2.6em;
}
.reco .find .findright .frtop p {
  transition: text-shadow 0.3s ease;
}
.reco .find .findright .frtop p:hover {
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
}
.reco .find .findright .frtop .frtopp {
  margin-left: 10%;
  margin-top: 4%;
}
.reco .find .findright .frbot {
  display: flex;
  justify-content: right;
  margin-top: 6%;
  overflow: hidden;
}
.reco .find .findright .frbot img {
  max-width: 100%;
  transition: all 1.5s;
}
.reco .find .findright .frbot img:hover {
  transform: scale(0.8);
}

@media screen and (max-width: 769px) {
  .header .searcho .seacontent .seabut .seatit {
    font-size: 0.5rem;
  }
  .reco .titlebox .title-tit {
    font-size: 1.5rem;
  }
  .reco .titlebox .title-p {
    font-size: 1rem;
  }
  .reco .activeo {
    width: 94%;
  }
  .reco .activeo .actbutbox {
    width: 100%;
    flex-wrap: wrap;
  }
  .reco .activeo .actbutbox .rollbut {
    margin-top: 2%;
    width: 30%;
    padding: 0;
    font-size: 1.1rem;
  }
  .reco .activeo .rolltab .overseas {
    display: block;
  }
  .reco .activeo .rolltab .overseas .osson:nth-child(n+4) {
    display: none;
  }
  .reco .activeo .rolltab .overseas .osson {
    width: 100%;
    border-radius: 4px;
  }
  .reco .activeo .rolltab .overseas .osson .ossonleft {
    width: 35%;
  }
  .reco .activeo .rolltab .overseas .osson .ossonright {
    width: 62%;
    padding: 1% 2% 1% 0;
  }
  .reco .activeo .rolltab .overseas .osson .ossonright .osrp {
    font-size: 1.8em;
    text-align: left;
  }
  .reco .activeo .rolltab .overseas .osson .ossonright .osrtext {
    font-size: 1.2em;
    margin: 3% 0;
  }
  .reco .activeo .rolltab .overseas .osson .ossonright .osrtetail {
    transform: translateX(60%);
    font-size: 0.1em;
  }
  .reco .hotbox {
    width: 96%;
  }
  .reco .hotbox .hotbody .hotcenter p {
    font-size: 8px;
  }
  .reco .hotbox .hotto .hotbut a {
    font-size: 10px;
  }
  .reco .camplist {
    width: 100%;
  }
  .reco .camplist .listbody {
    border-radius: 8px;
  }
  .reco .camplist .listbody .listright .lrp {
    font-size: 0.5em;
    margin-top: 2.6%;
  }
  .reco .find {
    padding: 3% 2%;
  }
  .reco .find .findleft .findtit {
    font-size: 1.5em;
  }
  .reco .find .findright .frtop {
    font-size: 1.2em;
  }
}/*# sourceMappingURL=recommend.css.map */